<template>
  <div class="sdy-cart">
    <SdyHeader title="啥都有购物车" back></SdyHeader>
    <ul class='cart'>
      <div class="top">
        <van-radio class='select-item' :checked='selectAll' name="1" checked-color="#ee0a24">全选</van-radio>
      </div>
      <li v-for='item in cartList' :key="item.proid">
        <van-radio @click='updateStatus(item.cartid,!item.flag)' class='select-item' :checked='item.flag' name="1" checked-color="#ee0a24"></van-radio>
       <van-card
       class='goods-item'
         num="2"
         :price="item.originprice"
         desc="描述信息"
         :title="item.proname"
         :thumb="item.img1"
       >
         <template #tags>
           <van-tag plain type="danger">-</van-tag>
           <input type="text" class='num-inp' :value='item.num'>
           <van-tag plain type="danger">+</van-tag>
         </template>
         <template #footer>
           <van-button size="mini">按钮</van-button>
           <van-button size="mini">按钮</van-button>
         </template>
       </van-card>
      </li>
    </ul>
    <div class="bottom">
      总价：{{totalPrice.toFixed(2)}}
    </div>
    <hr>
    猜你喜欢--
    <SdyHomeGoodsList></SdyHomeGoodsList>

    <!-- 底部内容 -->
    <Teleport to="#sdy-footer">
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" />
        <van-action-bar-icon icon="cart-o" @click='$router.push("/order")' text="查看订单" />
        <van-action-bar-icon icon="shop-o" text="店铺" />
        <van-action-bar-button type="danger" @click='addOrderHandler' text="去结算"  />
      </van-action-bar>
    </Teleport>
  </div>
</template>

<script setup lang="ts">
import {onMounted,ref,computed} from 'vue'
import {useRoute,useRouter,type Router, type RouteLocationNormalizedLoaded} from 'vue-router'
import {Dialog} from 'vant'
import {getCartListApi,updateStatusApi} from '@/api/cart'
import {hotSearchApi} from '@/api/goods'
import type {MyCartItem,MyHotItem} from '@/config/interface'
import {addOrderApi} from '@/api/order'
import SdyHomeGoodsList from "@/views/SdyHome/components/SdyHomeGoodsList.vue"
//验证登录
const $route: RouteLocationNormalizedLoaded= useRoute()
const $router: Router = useRouter()

// 获取验证token
  const token = window.localStorage.getItem('token')
  const user_id = window.localStorage.getItem('user_id')
  const testToken =()=>{
    if(!token || !user_id){
      Dialog({
        title:'提示',
        message:'您还没有登录'
      }).then(()=>{
        $router.push({path:'/login'})
      })
      return
    }
  }
  //获取购物车
  const cartList =ref<MyCartItem[]>([])
  const getCartList = async()=>{
    const res = await getCartListApi(user_id as string)
    cartList.value = res.data
  }
  //获取热门相关商品
  const goodsList =ref<MyHotItem[]>([])
  const hotSearch = async ()=>{
    const res = await hotSearchApi()
    goodsList.value = res.data
  }
//全选数据
const selectAll = computed(()=>{
  return cartList.value.every(item => item.flag)
})
//准备总价
const totalPrice = computed(()=>{
  return cartList.value.reduce((prev,item)=>{
    if(item.flag){

      return prev + (item.originprice * item.num)
    }else{
      return prev
    }
  },0)
})
//修改购物车选中状态
const updateStatus = async (id:string,flag:boolean)=>{
  const res = await updateStatusApi(id,flag)
  if(res.code === '200') {
    getCartList()
  }
}
//去结算，生成订单
const addOrderHandler = async()=>{
  const res =  await addOrderApi(user_id as string)
  //把订单信息存储在localStorage内
  window.localStorage.setItem('time',((res as unknown) as {time:string}).time)
}

  onMounted(()=>{
    testToken()
    getCartList()
    hotSearch()
  })
</script>

<style scoped lang="scss">
  .cart{
    > li {
      display: flex;
      box-sizing: border-box;
      padding: 3px 10px;
      > .select-item{
        width: 30px;

      }
      > .goods-item{
        flex: 1;
      }
    }
  }
  .num-inp{
    width: 8px;
    height:10px;
    text-align: center;
    margin: 0 1px;
    // border-color: #ee0a24;
  }
</style>
